<template>
	<view class="item flex f-d-c" @click="goTo({url:'/pages/my/giftInfo?id='+data.id})">
		<view class="gift-shop-image all-center">
			<image class="image" :src="data.image" mode="aspectFit"></image>
		</view>
		<view class="gift-name-box">
			<view class="gift-name f-s-28 color-333 f-w-b">
				{{data.name||""}}
			</view>
			<view class="buy-number flex a-i-c j-c-b w-100">
				<view class="left f-s-24 color-999">
					{{data.receive_count||0}}人已领
				</view>
				<view class="mianfeiget all-center color-fff f-s-22" v-if="data.status !==1">
					免费领取
				</view>
				<view class="mianfeiget all-center color-fff f-s-22" style="background: #999999;" v-else>
					已领取
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		name:"giftBox",
		props:{
			data:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goTo
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		width: 340upx;
		height: 406upx;
		background: #FFFFFF;
		border-radius: 16upx;
		margin-bottom: 22upx;
		.gift-name-box{
			width: 100%;
			padding: 0 26upx;
			.buy-number{
				width: 100%;
				.mianfeiget{
					width: 148upx;
					height: 52upx;
					background: #2567F3;
					border-radius: 6upx;
				}
			}
			.gift-name{
				margin-bottom: 22upx;
			}
		}
		.gift-shop-image{
			width: 100%;
			height: 248upx;
			margin-bottom: 22upx;
			border-radius: 16upx 16upx 0 0;
			overflow: hidden;
			.image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>